/* global document */
// TODO 查询行
import React from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import {FilterItem} from 'components'
import {Button, Col, DatePicker, Form, Input, Row} from 'antd'

const {Search} = Input
const {RangePicker} = DatePicker

const ColProps = {
  xs: 24,
  sm: 12,
  style: {
    marginBottom: 16,
  },
}

const TwoColProps = {
  ...ColProps,
  xl: 96,
}

const ArticleFilterPub = ({
                         tabPaneKey,
                         selectedRowKeys,
                         onFilterChange,
                         onAdd,
                         filter,
                         form: {
                           getFieldDecorator,
                           getFieldsValue,
                           setFieldsValue,
                         },
                       }) => {

  // 查询条件格式化
  const handleFields = (fields) => {
    // const {createTime} = fields
    // if (createTime.length) {
    //   fields.createTime = [createTime[0].format('YYYY-MM-DD'), createTime[1].format('YYYY-MM-DD')]
    // }
    return fields
  }

  // 查询条件提交，后台查询
  const handleSubmit = () => {
    let fields = getFieldsValue()
    fields = handleFields(fields)
    onFilterChange(fields)
  }

  // TODO onFilterChange
  const handleChange = (key, values) => {
    let fields = getFieldsValue()
    fields[key] = values
    fields = handleFields(fields)
    onFilterChange(fields)
  }

  // 重置查询条件
  const handleReset = () => {
    const fields = getFieldsValue()
    for (let item in fields) {
      if ({}.hasOwnProperty.call(fields, item)) {
        if (fields[item] instanceof Array) {
          fields[item] = []
        } else {
          fields[item] = undefined
        }
      }
    }
    setFieldsValue(fields)
    handleSubmit()
  }

  // TODO 时间查询
  // let initialCreateTime = []
  // if (filter.createTime && filter.createTime[0]) {
  //   initialCreateTime[0] = moment(filter.createTime[0])
  // }
  // if (filter.createTime && filter.createTime[1]) {
  //   initialCreateTime[1] = moment(filter.createTime[1])
  // }

  return (
    <Row gutter={24}>

      {/*名称查询*/}
      <Col {...ColProps} xl={{span: 8}} md={{span: 16}}>
        {getFieldDecorator('title', {initialValue: ''})(
          <Search placeholder="输入文章标题" enterButton="查询" onSearch={handleSubmit} />,
        )}
      </Col>

      {/*查询按钮*/}
      <Col {...TwoColProps} xl={{span: 16}} md={{span: 24}} sm={{span: 24}}>
        <div style={{display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap'}}>

          <div>
            <Button onClick={handleReset}>重置</Button>
          </div>

        </div>
      </Col>

    </Row>
  )
}

ArticleFilterPub.propTypes = {
  tabPaneKey: PropTypes.string,
  onAdd: PropTypes.func,
  form: PropTypes.object,
  filter: PropTypes.object,
  onFilterChange: PropTypes.func,
}

export default Form.create()(ArticleFilterPub)
